/**
 *#info
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/05/08
 *@description  列布局，每个row中的col总和应该为24
 */
import config from '../../../config/config.js'

/**
 * #item
 *
 * @type aty-col
 * @cn  列
 * @stPlugin false
 * @parents  [aty-row]
 * @stContainer true
 * @description 我们采用了24栅格系统，将区域进行24等分，这样可以轻松应对大部分布局问题。使用栅格系统进行网页布局，可以使页面排版美观、舒适。
 */
// 模块
const module = {
  name: config.prefix + '-col',
  props: {
    /**
     * #property
     *
     * @name span
     * @cn  占位格数
     * @type list
     * @options [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
     * @description 栅格的占位格数，可选值为0~24的整数，为 0 时，相当于display:none
     */
    span: [Number, String],
    /**
     * #property
     *
     * @name push
     * @cn   向右移动格数
     * @type list
     * @options [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,' ']
     * @description 栅格向右移动格数
     */
    push: [Number, String], // 栅格向右移动格数
    /**
     * #property
     *
     * @name pull
     * @cn   向左移动格数
     * @type list
     * @options [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
     * @description 栅格向左移动格数
     */
    pull: [Number, String],
    /**
     * #property
     *
     * @name offset
     * @cn   间隔格数
     * @type list
     * @options [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
     * @description 栅格左侧的间隔格数，间隔内不可以有栅格
     */
    offset: [Number, String],
    /**
     * #property
     *
     * @name order
     * @cn   顺序
     * @type list
     * @options [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
     * @description 栅栅格的顺序，在flex布局模式下有效
     */
    order: [Number, String],
    /**
     * #property
     *
     * @name xs
     * @cn   xs
     * @group 响应式栅格
     * @type number,object
     * @bind must
     * @description <768px 响应式栅格，可为栅格数或一个包含其他属性的对象
     */
    xs: [Number, Object],
    /**
     * #property
     *
     * @name sm
     * @cn   sm
     * @group 响应式栅格
     * @type number,object
     * @bind must
     * @description ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象
     */
    sm: [Number, Object],
    /**
     * #property
     *
     * @name md
     * @cn   md
     * @group 响应式栅格
     * @type number,object
     * @bind must
     * @description ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象
     */
    md: [Number, Object],
    /**
     * #property
     *
     * @name lg
     * @cn   lg
     * @group 响应式栅格
     * @type number,object
     * @bind must
     * @description ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象
     */
    lg: [Number, Object]
  },
  data () {
    return {
      scope: {
        className: config.prefix + '-col'
      }
    }
  },
  computed: {
    className () {
      const classList = [
                `${this.scope.className}`,
                {
                  [`${this.scope.className}-span-${this.span}`]: this.span,
                  [`${this.scope.className}-order-${this.order}`]: this.order,
                  [`${this.scope.className}-offset-${this.offset}`]: this.offset,
                  [`${this.scope.className}-push-${this.push}`]: this.push,
                  [`${this.scope.className}-pull-${this.pull}`]: this.pull
                }
      ];

      ['xs', 'sm', 'md', 'lg'].forEach(size => {
        if (typeof this[size] === 'number') {
          classList.push(`${this.scope.className}-span-${size}-${this[size]}`)
        } else if (typeof this[size] === 'object') {
          const props = this[size]
          Object.keys(props).forEach(prop => {
            classList.push(
              prop !== 'span'
                ? `${this.scope.className}-${size}-${prop}-${props[prop]}`
                : `${this.scope.className}-span-${size}-${props[prop]}`
            )
          })
        }
      })
      return classList
    }
  }
}
export default module
